<template>
    <div>
        <ul>
            <h2 :style="{opacity}">你好大傻逼</h2>
            <li>第一条新闻 <input type="text"></li>
            <li>第二条新闻 <input type="text"></li>
            <li>第三条新闻 <input type="text"></li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'News',
    data() {
        return {
            opacity: 1
        }
    },
    //在进行路由切换时，无法实现即时清理定时器的操作，这个时候就需要用到 路由的2个生命周期钩子
    // mounted() {
    //     this.Timer = setInterval(() => {
    //         console.log(1)
    //         this.opacity -= 0.1
    //         if (this.opacity < 0) {
    //             this.opacity = 1
    //         }
    //     }, 100)
    // },
    // beforeDestroy() {
    //     clearInterval(this.Timer)
    // },
    //使用这2个钩子函数就完美解决了上面的问题
    activated() {
        this.Timer = setInterval(() => {
            console.log(1)
            this.opacity -= 0.1
            if (this.opacity < 0) {
                this.opacity = 1
            }
        }, 100)
    },

    deactivated() {
        clearInterval(this.Timer)
    },
}
</script>
<style>
    
</style>